<template>
	<view class="container" :style="{ height: winHeight }">
    <view class="navbar">
      <navbar title="欢迎光临" left=""></navbar>
    </view>
    <view class="message-tip">
      <view style="max-width: 70px;width: 28%">活动通知:</view>
      <view class="notice">{{notice}}</view>
    </view>
    <view class="message-content">
     <!-- {{options}} -->
      <image :src="member_url" style="width: 100%;height:100%;border-radius: 15rpx;"></image>
    </view>
    <view class="home-button-list" v-if="!showQueuing">
      <view class="btn" @click="goPage">
        <view style="margin-right:30rpx;">点餐</view>
<!--        <u-icon name="thumb-up" size="72" top="-5"></u-icon>-->
        <image src="/static/images/order-1_03.gif" style="width: 56rpx;height: 88rpx"></image>
      </view>
      <view class="center-line"></view>
      <view class="btn" @click="goOrder">
        <view style="margin-right:30rpx;word-break:keep-all; white-space:nowrap;">我的订单</view>
<!--        <u-icon name="order" size="72"></u-icon>-->
        <image src="/static/images/order-list-1_05.png" style="width: 86rpx;height: 88rpx"></image>
      </view>
    </view>
    <view class="home-button-list" v-else>
      <view class="btn" @click="goQueuingView">
        <view>我的取号</view>
        <u-icon name="thumb-up" size="72" top="-5"></u-icon>
      </view>
    </view>
    <view class="white-line"></view>
    <view class="banner">
      <image :src="banner" mode="widthFix" style="width: 100%;height:100%"></image>
    </view>
  </view>
</template>
<script>
import PageApi from "@/api/page"
import {mapState} from "vuex"; //引入mapState, mapGetters
export default {
    data() {
        return {
          winHeight: uni.getSystemInfoSync().windowHeight+'px',
          banner: "", // banner
          member_url: "", // 主页图片
          notice: "" // 活动通知
        };
    },
    async onShow(options) {
      if(!this.showQueuing){
        PageApi.pageIndex({
          table_no: this.table_no,
          branch_uuid: this.branch_uuid
        }).then(async res=>{
          if(res.code == 200){
            this.banner = res.data.banner
            this.member_url = res.data.member_url
            this.notice = res.data.notice
          }
        })
      }
    },
  async mounted() {

  },
  computed: {
    ...mapState({
      table_no: (state) => state.order.table_no,
      branch_uuid: (state) => state.order.branch_uuid
    }),
    options() {
      return uni.getStorageSync('options')
    },
    // 是否判断扫码登录。为了审核，展示一个假的排队页面
    showQueuing() {
      return this.$store.state.page.showQueuing
    }
  },
  methods: {
      async goPage() {
        if(uni.getStorageSync("TABLE_STATUS") === false){
          uni.showToast({
            icon: "none",
            duration: 3000,
            title: "该桌码目前无法下单,请更换桌码",
          });
          return
        }
        // const r = await this.reloadPageData()
        // if(r.code == 200) {
          uni.navigateTo({
            url: "/pages/index/index",
            fail: (err) => {
              console.log(err);
            },
          });
        // }
      },

      goOrder() {
        if(uni.getStorageSync("TABLE_STATUS") === false){
          uni.showToast({
            icon: "none",
            duration: 3000,
            title: "该桌码目前无法下单,请更换桌码",
          });
          return
        }
        uni.navigateTo({
          url: "/pages/myOrder/index",
          fail: (err) => {
            console.log(err);
          },
        });
      },

    goQueuingView() {
      uni.navigateTo({
        url: "/pages/queuing/index",
        fail: (err) => {
          console.log(err);
        },
      });
    },

      // 刷新页面数据
      reloadPageData() {
        const self = this
        return PageApi.pageList().then(pageRes=>{
          if(pageRes.code == 200){
            self.$store.commit('page/setSlideshow',pageRes.data.slideshow)
            self.$store.commit('page/setCategory',pageRes.data.category)
            self.$store.commit('cart/setCartInfo',pageRes.data.cart_info)
            self.$store.commit('cart/setOrderInfo',pageRes.data.order_info)
          }
          return pageRes
        })
      },
    },
};
</script>
<style lang="scss">
page{
  background-color: #efeff3 !important;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .message-tip {
    background-color: #fef7e1;
    color: orange;
    //max-height: 90rpx;
    //line-height: 80rpx;
    padding: 10rpx 20rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    .notice{
      width: 78%;
      text-overflow: ellipsis; // 无效
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -moz-box;
      -moz-line-clamp: 2;
      -moz-box-orient: vertical;
      overflow-wrap: break-word;
      word-break: break-all;
      white-space: normal;
      overflow: hidden;
    }
  }

  .message-content{
    height: 480rpx;
    background-color: #ee8378;
    margin-top: 20rpx;
    border-radius: 15rpx;
  }

  .home-button-list{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 100rpx;
    line-height: 100rpx;
    margin-top: 20rpx;
    padding: 20rpx 50rpx;
    background-color: #ffffff;
    .center-line{
      border: 1px solid #efeff3;
    }
    .btn{
      width: 40%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }
  .white-line{
    height: 30rpx;
    background-color: white;
    width: 100%;
    margin-top: 20rpx;
  }
  .banner{
    //position: fixed;
    //bottom: 0;
    background-color: #ffffff;
    //height: 30vh;
    width: 100%;
    flex: 1;
    //z-index: 999;
  }
}
</style>
